<template>
    <view class='page'>
        <u-navbar title="服务详情" :back-icon-color="'#ffffff'" :title-color="'#ffffff'" :background="background"></u-navbar>
        <view class="content">
            <view class="banner">
                <u-swiper :list="bannerList" height="536"></u-swiper>
                <!-- img-mode="widthFix" -->
            </view>
            <view class="cont">
                <view class="boxli">
                <view class="title">{{data.name}}</view>
                <!-- #ifdef MP  -->
                <button class="share-button" open-type="share">
                    <image :src="$imgUrl+'image/share.png'"></image>
                </button>
                <!-- #endif -->
                 </view>
                <view class="boxli">
                    <view class="price">￥{{data.current_price || ''}}</view>
                    <view style="font-size:30rpx;">服务时长：{{data.service_duration}}分钟</view>
                </view>
                <view class="height30" style="margin-top: 30rpx;"></view>
                <view class="evaluate-data" ref="evaluate" @click="goReviews">
                    <view class="boxl">
                        <view class="p1">评价</view>
                        <!-- <view>{{product.evaluNumber}}</view> -->
                    </view>
                    <view class="boxr">
                        <!-- <view class="p1">好评{{product.evaluRate}}%</view> -->
                        <view class="more-content">
                            <text class="iconfont icon-more more"></text>
                        </view>
                    </view>
                </view>
                <view style="height: 1rpx;"></view>
                <view class="evaluateB" v-if="isShow0">
                    <view>此服务暂无评价</view>
                </view>
                <view class="evaluateB" @click="goReviews" v-else>
                    <view class="boxt">
                        <view class="boxl">
                            <image :src="evaluate.avatar"></image>
                            <view>{{evaluate.nicename}}</view>
                        </view>
                        <view style="color: #999;">{{evaluate.time}}</view>
                    </view>
                    <view class="comment">{{evaluate.content}}</view>
                    <view class="gg" style="">{{evaluate.specs}}</view>
                </view>
                
                <view class="height30"></view>
                
                <view class="ensure">
                    <view class="item">
                        <text>保障</text>
                    </view>
                    <view class="item">
                        <image :src="$imgUrl+'service/safe.png'" mode="widthFix"></image>
                        <text>身份认证</text>
                    </view>
                    <view class="item">
                        <image :src="$imgUrl+'service/safe.png'" mode="widthFix"></image>
                        <text>健康认证</text>
                    </view>
                    <view class="item">
                        <image :src="$imgUrl+'service/safe.png'" mode="widthFix"></image>
                        <text>技能认证</text>
                    </view>
                </view>
              
                <view class="share">
                    <view class="fw">服务内容</view>
                   
                </view>
                <view class="descc">
                    <!-- 服务内容
                    针对自理、半自理、全护、特护老年人，提供专业机构化居家
                    服务;餐饮、居家照护、医疗、护理、康复等
                    服务流程: 1.评估2.签订服务协议3、安排护理人员上门(试用3天) 4、正式服务5、回访
                    服务内容:
                    1、生活照料类:为老人提供居家照护、购物、餐饮、代购物品、家政服务等-般照料和陪护等特殊照顾的服务。
                    2、医疗保健类:建立健康档案，为老年人提供陪护、陪伴看病、疾病防治、康复护理、心理卫生、健康教育等服务。 -->
                    <!-- <rich-view :nodes="data.content"></rich-view> :html="data.content" class='newDynamic' :content="formatRichText(data.content)" -->
                    <u-parse :html="data.content" ></u-parse>
                </view>
            </view>
            <view class="bottom">
                <view class="box">
                    <view class="boxl">
                        <!-- <view class="item" @tap="call(phone)">
                            <image :src="$imgUrl+'service/tel.png'" mode="heightFix"></image>
                            <text>电话咨询</text>
                        </view> -->
                        <view class="item" @tap='toChatPage()'>
                            <image :src="$imgUrl+'service/message.png'" mode="heightFix"></image>
                            <text>在线咨询</text>
                        </view>
                    </view>
                    <view class="boxr">
                        <button class="mini-btn" type="default" size="mini" @click="order()">立即预约</button>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>
<script>
import {
    getContInfo,
    setAppoin
} from "@/api/service.js"
export default {
    name: '',
    components: {
    },
    data() {
        return {
            phone: "",
            data: {},
            id: "",
            $imgUrl: this.$imgUrl,
            background: {
                // 渐变色
                backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
            },
            bannerList: [],
            isShow0: true,
        }
    },
    onLoad(query) {
        console.log(query, 'fuwu')
        if (query) {
            this.id = query.id
        }
        this.judgeLogin(() => {
            this.getList()
        });
    },
    methods: {
        getList() {
            this.$loading()
            this.bannerList = []
            getContInfo({
                service_id: this.id
            }).then(res => {
                this.data = res.data
                this.data.slider_pict.forEach(e => {
                    this.bannerList.push({
                        image: e
                    })
                });
                this.$hideLoading()
            })
        },
            //跳转服务评价
            goReviews(item) {
                uni.navigateTo({
                    url: '/pagesA/mall/goodsEvaluateList?data=' + encodeURIComponent(JSON.stringify(this.data))
                })
            },
        formatRichText(html){
            const formatRichText = (html) => {
                if(!(html && html.length)) {
                  return
                }
              let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
                match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
                match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
                match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
                return match;
              });
              newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
                match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
                return match;
              });
              newContent = newContent.replace(/<br[^>]*\/>/gi, '');
              newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
              newContent = newContent.replace(/style=""/gi, '');
              return newContent;
            }
        },
        order() {
            this.judgeLogin(() => {
                setAppoin({
                    service_id: this.id
                }).then(res => {
                    if (res.code == 1) {
                        uni.navigateTo({
                            url: "/pagesA/service/order?data=" + encodeURIComponent(JSON
                                .stringify(res.data))
                        })
                    }
                })
            })
        },
        call(phone) {
            const res = uni.getSystemInfoSync();
            if (res.platform == 'ios') {
                uni.makePhoneCall({
                    phoneNumber: phone,
                    success() {
                        console.log('拨打成功了');
                    },
                    fail() {
                        console.log('拨打失败了');
                    }
                })
            } else {
                uni.showActionSheet({
                    itemList: [phone, '呼叫'],
                    success: function (res) {
                        console.log(res);
                        if (res.tapIndex == 1) {
                            uni.makePhoneCall({
                                phoneNumber: phone,
                            })
                        }
                    }
                })
            }
        },
        toChatPage() {
            // console.log(">>>>>>>>>执行进入chat页面")
            // var nameList = {
            //     myName: "test1",
            //     your: "busin_1_staff_9"
            // }
            // uni.navigateTo({
            //     url: "/pagesA/chatroom/chatroom?username=" + JSON.stringify(nameList),
            // });
            if (!uni.getStorageSync('token')) {
                uni.navigateTo({
                    url: "/pages/login/index"
                })
            } else {
                wx.openCustomerServiceChat({
                    extInfo: {
                        url: 'https://work.weixin.qq.com/kfid/kfc54cbfbf7f9369805' //客服ID
                    },
                    corpId: "ww4d9a453b47317369", //企业微信ID
                    success(res) {
                        console.log(res, 789)
                    }
                })
            }
        },
    },

    // #ifdef MP-WEIXIN
    onShareAppMessage() {
        return {
            title: this.data.name,
            // imageUrl: "https://yl.weilankangyang.com/static/mini_program/logo.jpg",
            imageUrl: this.data.slider_pict[0],
            path: '/pagesA/service/detail?id' + this.data.id
        }
    },
    // #endif
}
</script>
<style scoped lang='scss'>
.page {
  background-color: #fff;

  .content {
    .banner {
      width: 100%;

      image {
        width: 100%;
      }
    }
    .height30 {
      width: 100%;
      height: 30rpx;
      background: #f7f7f7;
    }
    .cont {
      padding: 20rpx 0 180rpx;
      .boxli {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 30rpx;
        .title {
          // font-weight: 600;
          font-size: 36rpx;
          width: 90%;
        }
        .share-button {
          border: none;
          background-color: transparent;
          &::after {
            border: none;
          }
          image {
            width: 32rpx;
            height: 32rpx;
          }
        }
        .price {
          color: #ff0000;
          font-size: 36rpx;
          /* font-weight: bold; */
        }
      }

      .ensure {
        border-bottom: solid 1px #dbdbdb;
        display: flex;
        justify-content: space-between;
        padding: 30rpx;
        .item {
          padding-bottom: 16rpx;
          display: flex;
          align-items: center;

          image {
            width: 22rpx;
            margin-right: 6rpx;
          }

          text {
            font-size: 24rpx;
            color: #a2a1a2;
          }
        }
      }
      
      .evaluate-data {
        background: #ffffff;
        display: flex;
        align-items: center;
        padding: 30rpx;
        justify-content: space-between;
        font-size: 28rpx;
        border-bottom: 1rpx solid #f2f2f2;
      
        .boxl {
          display: flex;
          align-items: center;
      
          .p1 {
            margin-right: 20rpx;
          }
        }
      
        .boxr {
          display: flex;
          align-items: center;
      
          .p1 {
            margin-right: 20rpx;
            color: #ff0000;
          }
      
          .more-content {
            display: flex;
            align-items: center;
      
            .more {
              font-size: 24rpx;
              color: #959595;
              margin-left: 20rpx;
            }
          }
        }
      }
      
      .evaluateB {
        padding: 30rpx;
        font-size: 28rpx;
        background: #ffffff;
      /* border-bottom: solid 1px #dbdbdb; */
        .boxt {
          display: flex;
          align-items: center;
          padding-bottom: 30rpx;
          justify-content: space-between;
      
          .boxl {
            display: flex;
            align-items: center;
      
            image {
              width: 70rpx;
              height: 70rpx;
              border-radius: 100rpx;
              margin-right: 20rpx;
            }
          }
        }
      
        .gg {
          color: #999;
          padding-top: 30rpx;
        }
      }
      .share {
        display: flex;
        width: 100%;
        padding: 0 30rpx;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        .fw {
          font-size: 24rpx;
          color: #2f9971;
          padding: 20rpx 0;
          width: 90%;
        }
        
      }

      .descc {
        padding:0 30rpx;
        font-size: 24rpx;
        color: #000000;
        line-height: 50rpx;
        padding-bottom: 100rpx;
      }
    }
  }

  .bottom {
    width: 100%;
    background-color: #ececec;
    position: fixed;
    bottom: 0;
    padding: 30rpx 0;

    .box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .boxl {
        width: 35%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;

          image {
            height: 60rpx;
            margin-bottom: 22rpx;
          }

          text {
            font-size: 25rpx;
          }
        }
      }

      button {
        width: 346rpx;
        height: 86rpx;
        background-image: linear-gradient(0deg, #4199b2 0%, #2d996b 100%),
          linear-gradient(#359987, #359987);
        background-blend-mode: normal, normal;
        border-radius: 43rpx;
        font-size: 40rpx;
        letter-spacing: 8rpx;
        color: #ffffff;
        line-height: 86rpx;
        text-align: center;
      }
    }
  }
}
</style>